<template>
    <div class="">
        <div class="top">
            <p>
                <a href=""><i class="fa fa-commenting-o"></i></a>
                <a href="#/"><i class="fa fa-home"></i></a>
            </p>
            <div>
                <img @click="isShow=!isShow" :src="`http://localhost:2222/images/photos/${datas.head}`" alt="">
                <span v-if="!datas"><a href="#/login">登录</a>&#x3000|&#x3000<a href="#/zhuce">注册</a></span>
                <span v-if="datas">{{datas.name}} <span @click="tuichu">退出</span></span>
            </div>
            <form action="" ref="myform" class="refs" v-if="isShow">
                <img :src="`http://localhost:2222/images/photos/${datas.head}`" alt="">
                <input type="file" name="photo" accept="image/*"><br>
                <button @click="btnClick($event)" type="submit">提交</button>
            </form>
            <ul>
                <li>
                    <span> 0 </span>
                    <p>商品收藏</p>
                </li>
                <li>
                    <span>0</span>
                    <p>店铺收藏</p>
                </li>
                <li>
                    <span><i class="fa fa-user"></i></span>
                    <p>我的足迹</p>
                </li>
                <li>
                    <span><i class="fa fa-pencil"></i></span>
                    <p>签到领积分</p>
                </li>
            </ul>
        </div>
        <div class="fen"></div>
        <div class="my">
            <h3>
                <a>
                我的订单
                  <!--<span>查看全部订单</span>
                  <i class="fa fa-angle-right"></i>-->
                </a>
            </h3>

            <ul class="hehe hahah">
                <li>
                    <a href="">
                        <img src="../assets/07.png">
                        <p>待付款</p>
                    </a>
                </li>
                <li>
                    <a href="#/receving">
                    <img src="../assets/08.png">
                    <p>待收货</p>
                     </a>
                </li>
                <li>
                    <a href="#/dingdan">
                    <img src="../assets/10.png">
                    <p>全部订单</p>
                     </a>
                </li>
                <li>
                    <a href="">
                    <img src="../assets/11.png">
                    <p>退货</p>
                     </a>
                </li>

            </ul>
        </div>
        <div class="fen"></div>
        <div class="my">
            <h3>
                <a href="#">我的资产</a>
            </h3>

            <ul class="hehe">
                <li>
                    <img src="../assets/12.png">
                    <p>账户余额</p>
                </li>
                <li>
                    <img src="../assets/13.png">
                    <p>购物卡</p>
                </li>
                <li>
                    <img src="../assets/14.png">
                    <p>优惠券</p>
                </li>
                <li>
                    <img src="../assets/15.png">
                    <p>积分</p>
                </li>
                <li>
                    <img src="../assets/16.png">
                    <p>卡卷充值</p>
                </li>

            </ul>
        </div>
        <div class="fen"></div>
        <div class="part">
            <ul>
                <li>
                    <img src="../assets/01.png" alt="">
                    <p>个人信息</p>
                </li>
                <li>
                    <img src="../assets/02.png" alt="">
                    <p>曾经购买</p>
                </li>
                <li>
                    <img src="../assets/03.png" alt="">
                    <p>积分商城</p>
                </li>
                <li>
                    <img src="../assets/04.png" alt="">
                    <p>帮助中心</p>
                </li>
                <li>
                    <img src="../assets/06.png" alt="">
                    <p>意见反馈</p>
                </li>
            </ul>
        </div>
        <div class="fen"></div>
    </div>
</template>
<script>
    import axios from 'axios'
    import { Tabbar, TabbarItem, Group, Cell } from 'vux'
    export default {
        components: {
            Tabbar,
            TabbarItem,
            Group,
            Cell
        },
        data() {
            return {
                datas: '',
                isShow: false
            }
        },
        mounted: function () {
            var that = this;
            axios.get('los/login').then(function (data) {
                console.log(data.data.message.name)
                that.datas = data.data.message.name;
            }).catch(function (err) {
                console.log(err);
            })
        },
        methods: {
            tuichu: function () {
                axios.get('los/tuichu').then(function (data) {
                    alert('退出成功')
                    location.reload()
                }).catch(function (err) {
                    console.log(err);
                })
            },
            btnClick: function (ev) {
                ev.preventDefault();
                let photo = this.$refs.myform;
                let data = new FormData(photo);
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                };
                axios.post('los/infos', data, config).then((res) => {
                    if (res.data.error == 0) {
                        console.log('成功换头像');
                        location.reload();
                    }
                }).catch((err) => {
                    console.log(err)
                })
            },
        }

    }

</script>
<style scoped>
    .part>ul {
        overflow: hidden;
        list-style: none;
        margin: 0;
    }

    .part>ul li {
        float: left;
        width: 25%;
        box-sizing: border-box;
        border: 0.5px solid #eee;
        border-top: none;
        text-align: center;
        padding-top: 10px;
        font-size: 12px;
        line-height: 35px;
    }

    .part>ul li img {
        width: 23px;
    }

    .hehe {
        margin: 0;
        overflow: hidden;
        padding-top: 5px;
    }

    .hehe li {
        float: left;
        list-style: none;
        width: 20%;
        text-align: center;
        font-size: 11px;
    }
    .hahah > li{
        width: 25%;
    }
    .hahah > li > a{
       color: #666;
    }
    .hehe li img {
        width: 28px;
    }

    .my h3 {
        color: #666;
        line-height: 45px;
        font-size: 16px;
        margin: 0;
        margin-left: 10px;
    }

    .my h3 a {
        display: block;
        color: #666;
        position: relative;
        border-bottom: 1px solid #ddd;
    }

    .my h3 a span {
        position: absolute;
        font-size: 12px;
        right: 30px;
        top: 2px;
    }

    .my h3 a i {
        font-size: 26px;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .fen {
        padding: 5px;
        background: #eee;
    }

    .top>ul {
        list-style: none;
        background: #fff;
        color: #666;
        overflow: hidden;
        margin: 0;
    }

    .top ul>li {
        float: left;
        font-size: 12px;
        width: 25%;
        text-align: center;
        line-height: 26px;
    }

    .top {
        background-image: url(../assets/09.jpg);
        /*padding: 10px;*/
        color: #fff;
    }

    .top>p {
        text-align: right;
        font-size: 22px;
        color: #fff;
        margin: 0px 10px;
    }

    .top a {
        color: #fff;
    }

    form {
        width: 60%;
        height: 150px;
        text-align: center;
        border: 2px solid #f9b5b6;
        position: absolute;
        background: #E6E6FA;
        border-radius: 5px;
        left: 20%;
        top: 150px;
        z-index: 666;
        padding: 10px;
    }

    form>img {
        width: 69px;
        margin-bottom: 10px;
    }

    form input {
        position: absolute;
        left: 2px;
        height: 60px;
        opacity: 0;
    }

    form>button {
        border: 1px solid#1E90FF;
        background: #1E90FF;
        color: #fff;
        padding: 0 10px;
        margin-top: 10px;
        border-radius: 3px;
    }

    .top>div {
        height: 100px;
    }

    .top>div img {
        display: inline-block;
        width: 69px;
        height: 69px;
        border: 2px solid #f9b5b6;
        background: rgba(255, 255, 255, .5);
        border-radius: 50%;
        margin: 10px 10px 20px;
        position: relative;
    }

    .top>div>span {
        display: block;
        width: 130px;
        height: 30px;
        position: relative;
        bottom: 60px;
        left: 100px;
    }

    .top>div>span>span {
        position: absolute;
        right: 30px;
        top: 0;
    }
</style>